
import React, { Component } from 'react';

import './index.less';

import Base from '../../common/components/BaseComponent';

import Assignment from '../action';
import ButtonAction from '../../common/action/button';

import Layout from '../../../../hrpub/common/components/Layout';
import Pagination from "../../../../hrpub/common/components/Pagination";
import { handleHash } from '../../../../hrpub/common/utils/utils';

import { createPage, base } from 'nc-lightapp-front';
const {
    NCTabs,
    NCInput,
    NCFormControl
} = base;

const { Header, Left, Content } = Layout;

const { NCTabPane } = NCTabs;

class ContainerPage extends Base {
    constructor(props) {
        super(props);

        this.state = {
            pageHeight: 0
        };
        // 装载action
        this.loadActions();
    }

    // 配置actions
    actions = {
        Assignment: Assignment,
        ButtonAction: ButtonAction
    }

    componentDidMount() {
        this.action.Assignment.init()
            .then(() => {
                this.props.button.setButtonDisabled({
                    auth: true // 分配
                });
            });

        let app = document.getElementById('app');
        let searchEle = document.getElementsByClassName('u-form-control-wrapper formcontrol-hotkey-wrapper')[0];
        if (searchEle) {
            searchEle.style.width = '350px';
        }
        if (window.getComputedStyle) {
            let height = window.getComputedStyle(app).height.replace('px', '');
            this.setState({
                pageHeight: height
            });
        }
    }

    render() {
        const {
            button,
            syncTree,
            editTable,
            reportAss,
            meta
        } = this.props;
        const { pageHeight } = this.state;

        let tmp = meta.getMeta() || true;

        if (typeof tmp === 'object' && Object.keys(tmp).length <= 0) {
            tmp = false;
        }

        return (
            <Layout
                className="assignment-page"
            >
                <Header
                    button={button}
                    showButtons={true}
                    showOrgRefer={true && tmp}
                    buttonOptions={{
                        area: 'head',
                        onButtonClick: this.action.ButtonAction.onClickButton
                    }}
                    orgReferOptions={{
                        orgVal: reportAss.orgValue,
                        getOrgData: this.action.Assignment.getOrgData,
                        disabled: reportAss.editing
                    }}
                >
                </Header>
                <Left
                    style={{
                        top: '46px',
                        paddingLeft: '20px',
                        height: pageHeight - 46
                    }}
                >
                    {syncTree.createSyncTree({
                        treeId: 'reportGroupTree',
                        needSearch: false,
                        needEdit: false,
                        checkable: false,
                        defaultExpandAll: false,
                        onSelectEve: this.action.Assignment.selectTree,
                    })}
                </Left>
                <Content
                    style={{
                        marginLeft: '250px',
                        position: 'relative'
                    }}
                >
                    <div className='search'>
                        <NCFormControl
                            style={{ width: '350px' }}
                            placeholder={reportAss.activeTab === 'role' ? reportAss.language["hi6007-000295"] || '请输入角色编码或姓名' : reportAss.language["hi6007-000296"] || '请输入用户编码或姓名'}
                            value={reportAss.searchValue}
                            onChange={(v) => this.action.Assignment.searchChange({ v: v })}
                            type='search'
                            onSearch={(v) => this.action.Assignment.getMainTableData({ v: v })}
                        /></div>

                    <NCTabs
                        activeKey={reportAss.activeTab}
                        onChange={this.action.Assignment.onChangeTab}
                    >
                        <NCTabPane
                            key="role"
                            tab={reportAss.language['hi6007-000228']/*"角色"*/}
                            style={{
                                background: 'transparent'
                            }}
                        >
                            {editTable.createEditTable('role', {
                                showCheck: true,
                                showIndex: true,
                                onSelected: this.action.Assignment.selectRow,
                                onSelectedAll: this.action.Assignment.selectAllRow,
                                height: pageHeight - 200 
                                // adaptionHeight: true
                            })}
                            <div
                                        style={{
                                            marginTop: '10px',
                                            paddingRight: '20px'
                                        }}
                                    >
                                        <If condition={reportAss.rolePageInfo.total > 0}>
                                            <Pagination
                                                current={reportAss.rolePageInfo.pageIndex}
                                                pageSize={reportAss.rolePageInfo.pageSize}
                                                total={reportAss.rolePageInfo.total}
                                                showSizeChanger={true}
                                                showQuickJumper={true}
                                                onChange={this.action.Assignment.turnPage('rolePageInfo')}
                                                onShowSizeChange={this.action.Assignment.changePageSize('rolePageInfo')}
                                            />
                                        </If>
                                        
                                    </div>
                        </NCTabPane>
                        <NCTabPane
                            key="user"
                            tab={reportAss.language['hi6007-000229']/*"用户"*/}
                            style={{
                                background: 'transparent'
                            }}
                        >
                            {editTable.createEditTable('user', {
                                showCheck: true,
                                showIndex: true,
                                onSelected: this.action.Assignment.selectRow,
                                onSelectedAll: this.action.Assignment.selectAllRow,
                                height: pageHeight - 200
                                // adaptionHeight: true
                            })}
                            <div
                                        style={{
                                            marginTop: '10px',
                                            paddingRight: '20px'
                                        }}
                                    >
                                        <If condition={reportAss.userPageInfo.total > 0}>
                                            <Pagination
                                                current={reportAss.userPageInfo.pageIndex}
                                                pageSize={reportAss.userPageInfo.pageSize}
                                                total={reportAss.userPageInfo.total}
                                                showSizeChanger={true}
                                                showQuickJumper={true}
                                                onChange={this.action.Assignment.turnPage('userPageInfo')}
                                                onShowSizeChange={this.action.Assignment.changePageSize('userPageInfo')}
                                            />
                                        </If>
                                        
                                    </div>
                        </NCTabPane>
                    </NCTabs>
                </Content>
            </Layout>
        );
    }
}

export default createPage({})(handleHash('2019', 'c=600705A0&p=600705A0p')(ContainerPage));